<template>
    <div class="app">
        <div class="user">
            <div><input type="text" v-model="user" @focus="onfocusa" :placeholder="placeholdera" @blur="blura"></div>
            <div><input type="text" v-model="pasw" @focus="onfocusb" :placeholder="placeholderb" @blur="blurb"></div>
            <div class="svgcode">
                 <input type="text" v-model="svgcode" @focus="onfocusc" :placeholder="placeholderc" @blur="blurc">
                 <div class="svg"  @click="reverseSvg" v-html="url"></div>
            </div>
            <div class="action">
                <button @click="login">登录</button>
                <button>注册</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"login",
    data(){
        return{
            placeholdera:"请输入用户名",
            placeholderb:"请输入密码",
            placeholderc:"请输入验证码",
            user:"",
            pasw:"",
            svgcode:"",
            url:""
        }
    },
    mounted(){
        this.init();
    },
    methods:{
        onfocusa(){
            this.placeholdera = ""
        },
        onfocusb(){
            this.placeholderb = ""
        },
         onfocusc(){
            this.placeholderc = ""
        },
        blura(){
            this.placeholdera="请输入用户名"
        },
        blurb(){
            this.placeholderb="请输入密码"
        },
        blurc(){
            this.placeholderc="请输入验证码"
        },
        init(){
            this.$http({
                method:"get",
                url:this.$util.baseUrl+'app/home',
            }).then((res)=>{
                this.url = res.data.data.svg
            })
        },
        reverseSvg(){
            this.$http({
                method:"get",
                url:this.$util.baseUrl+'app/home',
            }).then((res)=>{
                this.url = res.data.data.svg
            })
        },
        login(){
            //登录调用的接口
            let data = {
                username : this.user,
                passward : this.pasw,
                svgcode : this.svgcode
            }
            if(data.username=="" || data.passward=="" || data.svgcode==""){   //判断是否有填写必填内容
                this.$dialog.alert({
                    message: '请输入必填项'
                })
                return;
            }
            this.$http({
                method:"post",
                url:this.$util.baseUrl+'app/login',
                data:data
            }).then((res)=>{
                let curTime = new Date().getTime();
                if(res.data.code == "800000"){
                    let date = new Date().getTime();
                    this.$localStorageTime.set('token',  res.data.data.split("^")[0], date + 1000000000)
                    localStorage.setItem("userid",res.data.data.split("^")[1])  ///用户id写入localstroage
                    localStorage.setItem("username",this.user)  ///用户name写入localstroage
                    this.$router.push({
                        path:"/app"
                    })
                }else if(res.data.code == "800003"){
                    this.$dialog.alert({
                        message: '验证码错误'
                    })
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .app{
        width: 100%;
        height: 100vh;
        background-image: url(./../../assets/img/loginBg.jpg);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        .user{
           width: 500px;
           div{
               margin-bottom: 50px;
           }
           input{
                width: 500px;
                height: 60px;
                border-radius: 20px;
                border: 0;
                outline: none;
                text-align: center;
                opacity: 0.8;    
                color: #333333;
                font-size: 40px;
           }
           .svgcode{
               display: flex;
               justify-content: space-between;
               align-items: center;
               .svg{
                   margin-bottom: 0;
                }
               input{
                width: 200px;
                height: 60px;
                border-radius: 20px;
                border: 0;
                outline: none;
                text-align: center;
                opacity: 0.8;    
                color: #333333;
                font-size: 30px;
            }
           }
           .action{
               width: 100%;
               display: flex;
               justify-content: space-between;
               align-items: center;
               button{
                   width: 200px;
                   height: 60px;
                   border: 0;
                   background: #07c160;
                   color: white;
                   font-size: 35px;
                }
           }
        }
    }
</style>